<template>
	<view class="countent">
		<view class="userAvar">
			<!-- <image src="" mode=""></image> -->
			<view class="topHeacd"></view>
			<view class="biaoti f f-a-c p-l-30">
				<image :src="'/static/zuo.png'" @click="navback" class="zuoImg" mode="aspectFill"></image>
			</view>
			<!-- <view class="box"> -->
		</view>
		<view class="topbei">
			<view class="zhezhao"></view>
			<image :src="obj.avatar||'/static/maomao.jpg'" class="maomao" mode="aspectFill"></image>
			<!-- 上面头像 -->
			<view class="HeadImage">
				<view class="box"></view>
				<view class="tou f f-a-c f-j-b">
					<image :src="obj.avatar" class="touImg" mode="aspectFill"></image>
					<view v-if="!obj.followed" @click="follow" class="Attention f f-j-c f-a-c">
						<image src="/static/shoop/jia.png" class="icon" mode=""></image>
						关注
					</view>
					<view v-else @click="unfollow" class="Attention f f-j-c f-a-c">
						取消关注
					</view>
				</view>
				<view class="name f f-a-c">
					{{obj.nickname}}
					<image src="/static/richang/icon@2x.png" v-if="obj.gender==2" class="sex" mode=""></image>
					<image src="/static/richang/icon_1@2x.png" v-if="obj.gender==1" class="sex" mode=""></image>
				</view>
				<view class="guanZhu f f-a-c">
					<view @click="gunazhu" class="cont f f-a-c">
						关注 <text>{{obj.follows}}</text>
					</view>
					<view class="shuXiaan"></view>
					<view @click="fensi" class="cont f f-a-c">
						粉丝 <text>{{obj.fans}}</text>
					</view>
					<view class="shuXiaan"></view>
					<view @click="gokitten" class="cont f f-a-c">
						猫猫 <text>{{obj.pets}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="bodyBiji f f-a-c m-b-30">
				TA的笔记 <text>{{list.length}}</text>
			</view>
			<view v-if="list.length==0" class="zanwu f f-a-c f-j-c f-d-c">
				<image src="/static/zanwu.png" class="zanwuImg" mode=""></image>
				<view class="conNei">
					这个人很懒，什么也没发～
				</view>
			</view>
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
				<pc-flow :data="list" field="images" limitation @contact="mycontact">
					<template #default="{row,rowIndex}">
						<!-- <image :src="item.img" class="imgView" mode="widthFix"></image> -->
						<view @click="goDetils(item,itemIndex)" class="listItem">
							<view class="titleName">
								{{row.content}}
							</view>
							<view class="botomUse f f-a-c f-j-b">
								<view class=" f f-a-c">
									<image :src="row.user.avatar" class="avaTou" mode="aspectFill"></image>
									<view class="name m-l-10 m-r-10">
										{{row.user.nickname}}
									</view>
									<image src="/static/richang/icon@2x.png" v-if="row.user.gender==2" class="sex"
										mode="">
									</image>
									<image src="/static/richang/icon_1@2x.png" v-if="row.user.gender==1" class="sex"
										mode=""></image>
								</view>
								<view class="f f-a-c">
									<image src="/static/richang/Frame@2x.png" v-if="row.liked" class="collect" mode="">
									</image>
									<image src="/static/richang/Frame_1@2x.png" v-else class="collect" mode=""></image>
									<view class="number m-l-10">
										{{row.likes}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</pc-flow>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list: [],
				list: [],
				id: '',
				obj: {},
				page: 1,
				total: 0
			}
		},
		async onLoad(options) {
			this.id = options.id
			await this.initObj()
			this.initList()
		},
		methods: {
			gokitten() {
				uni.navigateTo({
					url: '/pages/home/Management?num=3&id=' + this.obj.id
				})
			},
			gunazhu() {
				uni.navigateTo({
					url: '/pageB/MyAttention?num=3&id=' + this.obj.id
				})
			},
			fensi() {
				uni.navigateTo({
					url: '/pageB/MyFans?num=3&id=' + this.obj.id
				})
			},
			async initObj() {
				let n = await this.$api.personalHomepage({
					id: this.id
				})
				this.obj = n.data
			},
			async initList() {
				let n = await this.$api.dynamicList({
					page: this.page,
					type: 1,
					user_id: this.obj.id
				})
				let m = []
				n.data.rows.forEach(item => {
					item.images = item.images.split(',')[0]
					m.push(item)
				})
				this.total = n.data.total
				this.list = [...this.list, ...m]
			},
			// 取消关注
			async unfollow() {
				let n = await this.$api.unfollow({
					id: this.obj.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			// 关注
			async follow() {
				let n = await this.$api.follow({
					id: this.obj.id
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.initObj()
					}, 500)
				}
			},
			navback() {
				uni.navigateBack()
			},
			goDetils(item, index) {
				console.log(item, '8888888888888');
			},
			mycontact(e) {
				console.log(e, '99999999999');
				uni.navigateTo({
					url: '/pages/Meowmate/SocialDetails?id=' + e.id
				})
			},
			onreachBottom() {
				if (this.list.length < this.total) {
					this.page++
					this.initList()
				}
				console.log('456789');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zuoImg {
		width: 28rpx;
		height: 28rpx;

	}

	.userAvar {
		position: fixed;
		top: 0%;
		left: 0;
		height: 180rpx;
		width: 100%;
		background-color: transparent;
		z-index: 99;
	}

	.topHeacd {
		height: 70rpx;
	}

	.biaoti {
		height: 90rpx;
		width: 100%;
		// background-color: pink;

		.avar {
			width: 56rpx;
			height: 56rpx;
			border-radius: 50%;
		}

		.name {
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #333333;
		}
	}

	.zanwu {
		margin-top: 40%;

		.zanwuImg {
			width: 170rpx;
			height: 200rpx;
		}

		.conNei {
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-400;
			font-weight: 400;
			text-align: center;
			color: $hui;
			margin-top: 15rpx;
		}
	}

	pc-flow {
		width: 100%;

	}

	/deep/ .pc_flow {
		width: 100% !important;
		padding: 0 !important;
	}

	// .body {

	// height: calc(100vh - 330rpx);
	// width: 100%;
	// // background-color: pink;
	// overflow-y: auto;
	// width: 100%;
	// margin: 0 auto;
	// padding: 0 20rpx;
	// box-sizing: border-box;

	.listItem {
		width: 100%;
		margin-right: 2%;
		margin-bottom: 32rpx;

		&:nth-child(2n) {
			margin-right: 0;
		}

		.imgView {
			width: 100%;

			.imgs {
				width: 100%;
			}
		}

		.botomUse {


			.avaTou {
				width: 42rpx;
				height: 42rpx;
				border-radius: 21rpx;
			}

			.name {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
			}



			.collect {
				width: 24rpx;
				height: 24rpx;
			}

			.number {
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;
			}
		}

		.sex {
			width: 20rpx;
			height: 20rpx;
		}

		.titleName {
			margin: 20rpx 0;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;
			margin-top: 20rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical
		}
	}

	// }

	.body {
		position: fixed;
		bottom: 30rpx;
		left: 0;
		height: calc(100vh - 606rpx);
		width: 100%;
		padding: 30rpx;
		padding-bottom: 50rpx;
		border-radius: 60rpx 60rpx 0 0;
		background: #fffefc;
		z-index: 9999;

		.bodyBiji {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: $hei;

			text {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-500;
				font-weight: 500;
				text-align: LEFT;
				color: $hui;
				margin-left: 15rpx;
			}
		}
	}

	.HeadImage {
		width: 100%;
		padding: 0 30rpx;
		position: fixed;
		z-index: 9999999;
		top: 0;
		left: 0;

		.guanZhu {
			margin-top: 32rpx;

			.cont {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-400;
				font-weight: 400;
				text-align: LEFT;
				color: $hui;

				text {
					font-size: 28rpx;
					font-family: HarmonyOS Sans, HarmonyOS Sans-700;
					font-weight: 700;
					text-align: LEFT;
					color: $hei;
					margin-left: 5rpx;
				}
			}

			.shuXiaan {
				width: 0rpx;
				height: 24rpx;
				border-right: 1rpx solid rgba(0, 0, 0, 0.10);
				margin: 0 30rpx;
			}
		}

		.name {
			margin-top: 20rpx;
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-500;
			font-weight: 600;
			text-align: LEFT;
			color: #2f2319;

			.sex {
				width: 20rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}

		.tou {
			height: 144rpx;
			width: 100%;

			.touImg {
				width: 144rpx;
				height: 144rpx;
				border-radius: 77rpx;
			}

			.Attention {
				width: 140rpx;
				height: 64rpx;
				background: $brown;
				border-radius: 36rpx;
				font-size: 24rpx;
				font-weight: 500;
				text-align: LEFT;
				color: #ffffff;

				.icon {
					width: 20rpx;
					height: 20rpx;
				}

			}
		}

		.box {
			height: 250rpx;
			width: 100%;
		}
	}



	.topbei {
		position: fixed;
		top: 0;
		left: 0;
		height: 636rpx;
		width: 100%;

		.zhezhao {
			position: absolute;
			height: 100%;
			width: 100%;
			background: rgba(255, 255, 255, 0.85);
			// filter: blur(40rpx);
			top: 0%;
			z-index: 10;
		}

		/* 背景颜色和透明度 */
		.maomao {
			width: 100%;
			height: 100%;
			filter: blur(40px);
			object-fit: cover;
		}
	}
</style>